<template>
  <div
    class="color-picker"
    :class="{ active: active === color }"
    @click="handleClick"
    :title="tip"
  >
    <div class="color-preview" :style="{ backgroundColor: color }">
      <el-icon v-if="active === color" class="check-icon">
        <Check />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Check } from "@element-plus/icons-vue";

interface Props {
  color: string;
  active: string;
  tip: string;
}

interface Emits {
  (e: "update:active", value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const handleClick = () => {
  emit("update:active", props.color);
};
</script>

<style lang="scss" scoped>
.color-picker {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }

  &.active {
    transform: scale(1.2);

    .color-preview {
      border-color: var(--el-color-primary);
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
    }
  }
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--el-border-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 8px;
    background: linear-gradient(
        45deg,
        #f0f0f0 25%,
        transparent 25%,
        transparent 75%,
        #f0f0f0 75%
      ),
      linear-gradient(
        45deg,
        #f0f0f0 25%,
        transparent 25%,
        transparent 75%,
        #f0f0f0 75%
      );
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    z-index: -1;
  }
}

.check-icon {
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
</style>